import React from 'react';
import {Checkbox, Radio} from 'antd';
const RadioGroup = Radio.Group;
import {WeaSearchGroup, WeaFormItem, WeaInput, WeaInputNumber} from 'ecCom';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import EType from './base/EType';
import ETitle from './base/ETitle';
import {WeaMaterialLib} from 'weaPortalPublic';

// 音频元素
export default class Content_audio extends React.Component {
    state = {
        eAudioShow: this.props.eAudioShow,
        eAudioForm: this.props.eAudioForm
    };

    render() {
        const {eAudioShow, eAudioForm} = this.state;

        let EShowSetting = <div></div>;
        let EAudioFrom = <div></div>;
        if (this.props.eShareLevel == '2') {
            EShowSetting = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@rq2o83`} label={getLabel(33549, '显示设置')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <span>{getLabel(386530, '高度：')}</span>
                    <div style={{width: '70px', display: 'inline-block'}}>
                        <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@wj9yfu`} min={0} style={{width: '70px'}} value={eAudioShow.height} onChange={value => this.setState({eAudioShow: {...eAudioShow, height: value}})}/>
                    </div>
                    <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@3ykrgc`} checked={eAudioShow.autoPlay} style={{marginLeft: '10px'}} onChange={e => this.setState({eAudioShow: {...eAudioShow, autoPlay: e.target.checked}})}>{getLabel(22840, '自动播放')}</Checkbox>
                </WeaFormItem>
            );

            const radioStyle = {
                display: 'block',
                height: '30px',
                lineHeight: '30px',
                marginBottom: '5px'
            };
            EAudioFrom = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@lngv1n`} label={getLabel(23786, '音频来源')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <RadioGroup ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@o0sg7y`} value={eAudioForm.type || '1'} onChange={e => this.setState({eAudioForm: {...eAudioForm, type: e.target.value}})}>
                        <Radio ecId={`${this && this.props && this.props.ecId || ''}_Radio@py41n7`} style={radioStyle} value="1">{getLabel(125333, '选择文件')}</Radio>
                        <Radio ecId={`${this && this.props && this.props.ecId || ''}_Radio@egz5sl`} style={radioStyle} value="2">{getLabel(386575, 'URL路径')}</Radio>
                    </RadioGroup>
                    <div style={{position: 'absolute', top: 0, left: 0, width: '100%', marginLeft: '85px', paddingRight: '85px'}}>
                        <div style={radioStyle}>
                            <WeaMaterialLib ecId={`${this && this.props && this.props.ecId || ''}_WeaMaterialLib@d14f6w`} value={eAudioForm.src} onChange={value => this.setState({eAudioForm: {...eAudioForm, src: value}})}/>
                        </div>
                        <div style={radioStyle}>
                            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@wmxtg9`} value={eAudioForm.url} onChange={value => this.setState({eAudioForm: {...eAudioForm, url: value}})}/>
                        </div>
                    </div>
                </WeaFormItem>
            );
        }

        return (
            <div>
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@95ka0v`} title={getLabel(81711, '基本信息')} needTigger={true} showGroup={true}>
                    <EType ecId={`${this && this.props && this.props.ecId || ''}_EType@i4kcce`} ref="eType" value={this.props.eBaseName}/>
                    {this.props.eShareLevel == '2' ? <ETitle ecId={`${this && this.props && this.props.ecId || ''}_ETitle@waby32`} ref="eTitle" eid={this.props.eid} value={this.props.eTitle} {...this.props}/> : ''}
                    {EShowSetting}
                    {EAudioFrom}
                </WeaSearchGroup>
            </div>
        );
    }

    getSaveValues() {
        return {
            eContentTitle: this.refs['eTitle'] ? this.refs['eTitle'].getSaveValues() : this.props.eTitle,
            eContentAudioShow_height: this.state.eAudioShow.height,
            eContentAudioShow_autoPlay: this.state.eAudioShow.autoPlay,
            eContentAudioForm_type: this.state.eAudioForm.type || '1',
            eContentAudioForm_src: this.state.eAudioForm.src,
            eContentAudioForm_url: this.state.eAudioForm.url
        };
    }
}